<template>
  <div>
    <el-card style="margin: 10px 0">
      <div style="padding-bottom: 20px; font-size: 24px">简 单 的 系 统 公 告</div>
      <el-collapse accordion v-model="activeNames" v-for="(item,index) in notice">
        <el-collapse-item :name="index + ''">
          <template slot="title">
            <span style="font-size: 20px; color: #46c2fc">{{ item.name }}</span>
            <i style="color: #46c2fc" class="header-icon el-icon-info"></i>
            <span style="margin-left: 20px">{{ item.time }}</span>
          </template>
          <div>
            <div style="padding: 10px 0;width: 200px">
              <el-image :src="item.img"></el-image>
            </div>
            <div>{{ item.content }}</div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <el-card style="margin: 10px 0">
      <div style="padding-bottom: 20px; font-size: 24px">富 文 本 的 系 统 公 告</div>
      <el-collapse accordion  v-for="(item,index) in noticeRich">
        <el-collapse-item :name="index + ''">
          <template slot="title">
            <span style="font-size: 20px; color: #46c2fc">{{ item.name }}</span>
            <i style="color: #46c2fc" class="header-icon el-icon-info"></i>
            <span style="margin-left: 20px">{{ item.time }}</span>
          </template>
          <div>
            <div style="padding: 10px 0;width: 200px">
              <el-image :src="item.img"></el-image>
            </div>
            <div v-html="item.content"></div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "home",
  data() {
    return {
      notice: [],
      activeNames: ['0'],
      noticeRich: []
    };
  },
  created() {
    // 菜单公告
    this.request.get("/notice/type/1").then(res => {
      console.log('res', res)
      this.notice = res.data.splice(0, 5)
    })

    this.request.get("/notice/type/2").then(res => {
      console.log('res', res)
      this.noticeRich = res.data.splice(0, 5)
    })
  },

  //页面元素渲染之后再触
  mounted() {
  }
};
</script>